const Vue = require('vue');
const express = require('express');
const fs = require('fs');
// 设置 template，公共位置部分自动注入
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./vue.template.html','utf-8')
});
const server = express();
// 不需要 el 选项
const app = new Vue({
    template: `<div id="app">{{message}}</div>`,
    data: {
        message: 'hello，世界你好'
    }
})
// 解决乱码问题： 1.在 html 的meta标签中添加 chartset， 2. 在 response 中添加 content-type 声明
server.get('/', (req,res) => {
    renderer.renderToString(app, {
        title: 'Vue-SSR',
        meta: `
        <meta  name="description" content="xxx vue ssr"/>
        `
    }, (err, html) => {
        console.log(html)
        res.send(html);
    })
})
server.listen(3000,() => {
    console.log('listen: http://localhost:3000/')
})